<template>
    
    <div>
        <div v-if="$slots" @click="openDrawer">
            <slot :form="localForm"></slot>
        </div>
        <MyDrawer 
            :title="title"
            :visible.sync="visible" 
            :mode="mode"
            @close="closeCallback"
            @submit="onSubmit">
            
            <div class="ls-User__centent ls-card m-t-16">
                <el-form label-width="120px" size="small" ref="formRef" :model="localForm" :rules="formRules">
                    <!-- <el-form-item label="视频标题:">
                        <el-input v-model="localForm.title" disabled />
                    </el-form-item> -->
                
                    <el-form-item label="最小值:"  required>
                        <el-input v-model="localForm.start_interval"   />
                    </el-form-item>
                    <el-form-item label="最大值:"  required>
                        <el-input v-model="localForm.end_interval"   />
                    </el-form-item>
                    <el-form-item label="人数:"  required>
                        <el-input type="number" :min="1" v-model="localForm.count"   />
                    </el-form-item>
                   
                    <el-form-item label="日期:"  required>
                        <el-date-picker
                            v-model="localForm.date"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="金额:"  required >
                        <el-input  type="number" :min="0" v-model="localForm.balance"   />
                    </el-form-item>
                   
                    <!-- 
                         播放规则:1开始播放触发 2播放截止触发 选填 默认是播放截止触发
                     -->
                    <el-form-item label="播放规则:" required>
                        <el-radio :label="1" v-model="localForm.rule" :disabled="disabled">开始播放触发</el-radio>
                        <el-radio :label="2" v-model="localForm.rule" :disabled="disabled">播放截止触发</el-radio>
                        <el-radio :label="3" v-model="localForm.rule" :disabled="disabled">随机触发</el-radio>
                    </el-form-item>
                </el-form>
            </div>
        </MyDrawer>

    </div>
</template>

<script lang="ts">
import {
    Component,
    Prop,
    Ref,
    Vue
} from 'vue-property-decorator'

import {
    apiVideoRuleAdd,
    apiVideoRuleEdit
} from '@/api/application/red_envelope_video'
import Editor from '@/components/editor.vue'
import MaterialSelect from '@/components/material-select/index.vue'
import MyDrawer from '@/components/MyDrawer/MyDrawerIndex.vue'
import { IRedEnvelopeVideoEditFormInfo } from '@/interface/red_envelope_video.d'
import { PageMode } from '@/utils/type'

import { static_red_envelope_video } from './const'

interface IRuleAddForm {
    start_interval: string | number
    end_interval: string | number
    rule: string | number
    date: string
    balance: string | number
    count: string | number
}
interface IRuleEditForm extends IRuleAddForm {
   id: string | number
   video_id: string | number
}
interface IRuleSubmitForm  {
    start_interval: string | number
    end_interval: string | number
    rule: string | number
    date: string
    count: string | number
    money: string | number
    id?: string | number
    video_id?: string | number
    balance?: string | number
}
const static_form = {
    id: '',
    video_id: '',
    start_interval: '',
    end_interval: '',
    rule: 2, // 播放规则:1开始播放触发 2播放截止触发 选填 默认是播放截止触发
    date: '',
    balance: '',
    count: ''
}

@Component({
    components: {
        MyDrawer,
        MaterialSelect,
        Editor,

    }
})

export default class VideoDetail extends Vue {
    @Ref() readonly formRef!: Element
    @Prop({ default: ''}) title!: string 
    @Prop({ default: PageMode.ADD }) mode!: string
    @Prop({ default: ''}) videoId!: string 
    @Prop({
        default() {
            return {}
        }
    })
    editInfo!: IRuleEditForm | null
    
    localForm:IRuleEditForm = {
        ...static_form
    }
    formRules = {
        start_interval: [
            {
                required: true,
                message: '请填写最小值',
                trigger: 'blur'
            }
        ],
        end_interval: [
            {
                required: true,
                message: '请填写最大值',
                trigger: 'blur'
            }
        ]
       
    }
    disabled = false //是否禁用 查看详情时禁用
    visible = false
    isDevelopment = false
    mounted() {
        this.$nextTick(() => {
            this.initFormInfo()
        })
        this.processEnvModeEnvHandler()
    }
    openDrawer() {
        // console.log("aaaa", this.localForm)
        if (this.mode === "edit") {
            this.initFormInfo()
        }
        this.visible = true
    }
    closeCallback() {
        // this.initFormInfo()
    }
    initFormInfo() {
       
        const formInfo = this.editInfo || this.localForm
        this.localForm = Object.assign({}, JSON.parse(JSON.stringify(formInfo)), {

        })
    }
    
  
    changes(e: any) {}
    
    // 添加
    $refs!: {
        formRef: any
    }
    // 提交
    onSubmit() {
        const vm = this
        const routeQuery = this.$route.query || {
            ids: ''
        }
        const idstr = routeQuery.ids || ""
        this.$refs.formRef.validate((valid: boolean): any => {
            if (!valid) {
                return
            }
            if (vm.isDevelopment && idstr) {
                this.multipAddRule(String(idstr))
                return
            }
            if (vm.mode === 'add') {
                this.add()
            } else {
                this.edit()
            }
        })
    }
    multipAddRule(ids:string) {
        const videoIds = ids.split(",")
        if (!videoIds || !videoIds.length) {
            return
        }
        const vm = this
        const config:IRuleSubmitForm = this.getConfig()
        delete config.id
        videoIds.forEach((id) => {
            apiVideoRuleAdd({
                ...config,
                video_id: id
            })
            .then(res => {
            })
            .catch((err: Error) => {})
        })
    }
    add() {
        const vm = this
        const config:IRuleSubmitForm = this.getConfig()
        delete config.id
        apiVideoRuleAdd(config)
            .then(res => {
                vm.successHandler()
            })
            .catch((err: Error) => {})
    }
    edit() {
        const vm = this
        const config:IRuleSubmitForm = this.getConfig()
        apiVideoRuleEdit(config)
            .then(res => {
                vm.successHandler()
            })
            .catch((err: Error) => {})
    }
    /**
     * balance 字段要变成 money,
     */
    getConfig() {
        const vm = this
        // 
        // start_interval: string | number
        // end_interval: string | number
        // rule: string | number
        // date: string
        // count: string | number
        // money: string | number
        // id?: string | number
        // video_id?: string | number
        // balance?: string | number
        const keys = ['start_interval', 'end_interval', 'rule', 'date', 'count', 'balance', 'id', 'video_id']
        const localForm = JSON.parse(JSON.stringify(vm.localForm, keys))
        const config:IRuleSubmitForm = Object.assign({}, localForm, {
            money: vm.localForm.balance,
            video_id: vm.localForm.video_id || this.videoId,
        })
        delete config.balance
        return config
    }
    
    
   
    successHandler() {
        this.visible = false
        this.$emit("success")
    }
    processEnvModeEnvHandler(){
        let NODE_ENV = ''
        try{
            NODE_ENV = process.env.NODE_ENV
        }catch(e){
            NODE_ENV= ''
            //TODO handle the exception
        }
        this.isDevelopment = NODE_ENV === "development" ? true :false
    }
}
</script>
<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
